<template>
  <div class="product">
    <div class="product_swiper">
      <div class="swiper-container swiper_pro">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="its,idx in photos">
            <img :src="its" alt="">
          </div>
        </div>
        <div class="swiper-pagination pro_pa"></div>
      </div>
    </div>
    <div class="product_detail">
      <span class="product_detail_title">{{type.type_title}}</span>
      <div class="product_detail_div">
        <span>¥{{type.type_price}}</span>
        <span>销量 {{type.type_sales}}</span>
        <span>评分 {{item.score}}</span>
      </div>
    </div>
    <div class="product_choose" @click="iftanchuangs = true">
      已选:
      <!-- <span>{{item.attributes[0].name}} : {{item.attributes[0].attrs[0].name}} {{item.attributes[1].name}} : {{item.attributes[1].attrs[0].name}}</span> -->
      <span v-for="tp,idx in type.type_name">
        {{tp}}:{{idx | tpspan}}
      </span>
      <img :src="img02" alt="">
    </div>

    <div class="product_content">
      <div class="product_content_title">商品介绍</div>
      <div class="product_content01" v-html="item.content"></div>
    </div>

    <div class="product_tanchuang" v-show="iftanchuangs">
      <transition name="pro">
      <div class="product_tanchuang_content" v-show="iftanchuangs">
        <div class="product_tanchuang_content_title">
          <img class="product_tanchuang_content_title_img" :src="img03" alt="">
          <div class="product_tanchuang_content_title_text">
            <span>{{type.type_title}}</span>
            <p>￥{{type.type_price}}</p>
            <img class="product_tanchuang_content_close" :src="img04" alt="" @click="iftanchuangs = false">
          </div>
        </div>
        <div class="product_tanchuang_content_type">
          <div class="product_tanchuang_content_type_list">
            <span>{{type.type_name[0]}}</span>
            <div class="type_choose">
              <p v-for="tanz in tan.tan_version" :class="{pro_act:act_id1 == tanz.goods_id}" @click="proHandle1(tanz)">{{tanz.name}}</p>
            </div>
          </div>
          <div class="product_tanchuang_content_type_list">
            <span>{{type.type_name[1]}}</span>
            <div class="type_choose">
              <p v-for="tanz in tan.tan_color" :class="{pro_act:act_id2 == tanz.goods_id}" @click="proHandle2(tanz)">{{tanz.name}}</p>
            </div>
          </div>
          <div class="product_tanchuang_content_type_list">
            <span>{{type.type_name[2]}}</span>
            <div class="type_choose">
              <p v-for="tanz in tan.tan_size" :class="{pro_act:act_id3 == tanz.goods_id}" @click="proHandle3(tanz)">{{tanz.name}}</p>
            </div>
          </div>
        </div>
        <div class="product_tanchuang_content_num">
          <span>购买数量</span>
          <div class="product_tanchuang_add">
            <div class="less" @click="sum('-')">-</div>
            <p>{{sums}}</p>
            <div class="add" @click="sum('+')">+</div>
          </div>
        </div>
        <div class="add_cart" @click="addcart">加入购物车</div>
      </div>
      </transition>
    </div>
    <!-- <div class="product_footer">

    </div> -->
  </div>
</template>

<script>
import img01 from '../common/images/product01.jpg'
import img02 from '../common/images/arrow-right.png'
import img03 from '../common/images/product02.jpg'
import img04 from '../common/images/popup-close.png'
import '../common/css/swiper.css'
import Swiper from 'swiper'
const axios = require('axios')
var that
export default {
  data () {
    return {
      a: 1,
      id: '',
      img01,
      img02,
      img03,
      img04,
      act_id1: '',
      act_id2: '',
      act_id3: '',
      item: '',
      type: {
        type_id: '',
        type_name: '',
        type_title: '',
        type_price: '',
        type_sales: '',
        type_version: '',
        type_color: '',
        type_size: ''
      },
      tan: {
        tan_version: '',
        tan_color: '',
        tan_size: ''
      },
      photos: [],
      iftanchuangs: false,
      sums: 1, // 商品数量
      stock: '' // 库存
    }
  },
  filters: {
    tpspan (idx) {
      switch (idx) {
        case 0:
          return that.type.type_version
        case 1:
          return that.type.type_color
        case 2:
          if (that.type.type_size) {
            return that.type.type_size
          } else {
            return '无'
          }
      }
    }
  },
  methods: {
    proHandle1 (obj) {
      console.log(obj)
      this.act_id1 = obj.goods_id
      that.type.type_version = obj.name
      this.proHandle(obj)
    },
    proHandle2 (obj) {
      this.act_id2 = obj.goods_id
      that.type.type_color = obj.name
      this.proHandle(obj)
    },
    proHandle3 (obj) {
      this.act_id3 = obj.goods_id
      that.type.type_size = obj.name
      this.proHandle(obj)
    },
    proHandle (obj) {
      if (this.act_id1 == this.act_id2) {
        console.log(obj)
        this.img03 = obj.goods_detail.pic
        this.type.type_title = obj.goods_detail.title
        this.type.type_price = obj.goods_detail.price
        this.type.type_sales = obj.goods_detail.sales
      }
    },
    sum (mod) {
      var urls = 'goodsDetail/' + '/id/' + this.id
      axios.post('/api/' + urls).then(e => {
        // console.log(e.data)
        this.stock = e.data.stock
        if (mod == '-') {
          if (this.sums > 1) {
            this.sums--
          } else {
            alert('再减就没有了')
          }
        }
        if (mod == '+') {
          if (this.stock > this.sums) {
            this.sums++
          } else {
            alert('没有库存')
          }
        }
      })
    },
    addcart () {
      var urls = 'add2Cart/' + '/id/' + this.id + '/shop_num/' + this.sums + '/mid/' + 398
      axios.post('/api/' + urls).then(e => {
        console.log(e)
        alert(e.data.msg)
      })
    }
  },
  mounted () {
    // console.log(this.$router.currentRoute.query)
    var swiper1 = new Swiper('.swiper_pro', {
      autoplay: true,
      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
      pagination: {
        el: '.pro_pa',
        clickable: true
      }
    })
  },
  created () {
    that = this
    if (typeof (this.$router.currentRoute.query) === 'string') {
      this.$cookies.set('productId', this.$router.currentRoute.query)
    }
    this.id = this.$cookies.get('productId')
    console.log(this.$cookies.get('productId'))
    var urls = 'goodsDetail' + '/id/' + this.$cookies.get('productId')
    axios.post('/api/' + urls).then(e => {
      var goodsid = []
      this.photos = e.data.photo
      this.item = e.data
      this.type.type_id = e.data.id
      this.act_id1 = e.data.id
      this.act_id2 = e.data.id
      this.act_id3 = e.data.id
      e.data.attributes[0].attrs.forEach(obj => {
        if (obj.goods_detail) {
          goodsid.push(obj.goods_id)
        }
      })
      // console.log(goodsid)
      // console.log(this.type.type_id)
      var names = []
      var kinds = []
      var tans = [[], [], []]
      e.data.attributes.forEach((obj, idx) => {
        names.push(obj.name)
        obj.attrs.forEach(objs => {
          if (objs.goods_id == this.type.type_id) {
            kinds.push(objs.name)
          }
          if (objs.goods_id) {
            tans[idx].push(objs)
          }
          // console.log(objs)
        })
        // console.log(obj)
      })
      // console.log(tans)
      this.tan.tan_version = tans[0]
      this.tan.tan_color = tans[1]
      this.tan.tan_size = tans[2]
      this.type.type_name = names
      this.type.type_version = kinds[0]
      this.type.type_color = kinds[1]
      this.type.type_size = kinds[2]
      this.type.type_title = e.data.attributes[0].attrs[0].goods_detail.title
      this.type.type_price = e.data.attributes[0].attrs[0].goods_detail.price
      this.type.type_sales = e.data.attributes[0].attrs[0].goods_detail.sales
    })
  },
  watch: {
    photos (newval) {
      // console.log(newval)
    }
  },
  updated () {

  }
}
</script>

<style>
.pro-enter,.pro-leave-to{
  transform: translateY(100%);
}
.pro-enter-to,.pro-leave{
  transform: translateY(0);
}
.pro-enter-active,.pro-leave-active{
  transition: transform 1s ease;
}
.product{
  min-height: 15rem;
}
.product_swiper{
  width: 7.5rem;
  height: 7.5rem;
}
.swiper_pro{
  width: 100%;
  height: 100%;
}
.product_detail{
  width: 6.9rem;
  /* height: 0.8rem; */
  padding: 0.3rem;
  background-color: #ffffff;
}
.product_detail_title{
  display: block;
  font-size: 0.32rem;
  color: #000000;
  line-height: 0.4rem;
}
.product_detail_div{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.3rem;
}
.product_detail_div span:first-of-type{
  color: #e64340;
  margin-left: 0.2rem;
}
.product_detail_div span{
  font-size: 0.28rem;
  color: #999999;
}
.product_choose{
  width: 7rem;
  height: 1rem;
  background-color: #ffffff;
  margin-top: 0.2rem;
  padding-left: 0.5rem;
  font-size: 0.28rem;
  color: #999999;
  line-height: 1rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
}
.product_choose span{
  color: #666666;
  margin-left: 0.2rem;
  /* flex: 1; */
}
.product_choose img{
  width: 0.16rem;
  position: absolute;
  right: 0.2rem;
}
.product_content{
  width: 7.5rem;
  background-color: #ffffff;
  margin-top: 0.2rem;
}
.product_content_title{
  width: 7.2rem;
  height: 0.8rem;
  padding-left: 0.3rem;
  line-height: 0.8rem;
  font-size: 0.28rem;
  border-bottom: 1px solid #eeeeee;
}
.product_content01{
  width: 7.5rem;
}
.product_content01 p img{
  width: 7.5rem !important;
  display: block;
}

.product_tanchuang{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.product_tanchuang_content{
  width: 7.5rem;
  /* height: 7.4rem; */
  background-color: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.product_tanchuang_content_title{
  width: 6.9rem;
  /* height: 1.2rem; */
  border-bottom: 1px solid #eeeeee;
  position: relative;
  margin: auto;
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
}
.product_tanchuang_content_title_img{
  width: 1.2rem;
  display: block;
}
.product_tanchuang_content_title_text{
  width: 5rem;
  height: 1.2rem;
  margin-left: 0.2rem;
}
.product_tanchuang_content_title_text span{
  width: 5rem;
  font-size: 0.28rem;
  color: #000000;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  display: block;
  margin-top: 0.2rem;
}
.product_tanchuang_content_title_text p{
  font-size: 0.28rem;
  color: #e64340;
  margin-top: 0.3rem;
  margin-left: 0.1rem;
}
.product_tanchuang_content_close{
  width: 0.36rem;
  height: 0.36rem;
  position: absolute;
  right: 0rem;
  top: 0.2rem;
}
.product_tanchuang_content_type{
  width: 6.9rem;
  /* height: 4rem; */
  padding-bottom: 0.3rem;
  margin: auto;
  border-bottom: 1px solid #eeeeee;
}
.product_tanchuang_content_type_list{
  width: 100%;
  /* height: 1.2rem; */
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.product_tanchuang_content_type_list span{
  font-size: 0.32rem;
  color: #000000;
}
.type_choose{
  /* height: 0.6rem; */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.type_choose p{
  height: 0.6rem;
  padding: 0 0.3rem;
  border: 1px solid #dddddd;
  border-radius: 0.3rem;
  font-size: 0.28rem;
  color: #222222;
  line-height: 0.6rem;
  margin-right: 0.2rem;
  margin-top: 0.2rem;
}

.product_tanchuang_content_num{
  width: 6.9rem;
  height: 0.6rem;
  padding: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product_tanchuang_content_num span{
  font-size: 0.28rem;
  color: #000000;
}
.product_tanchuang_add{
  width: 1.8rem;
  height: 0.6rem;
  display: flex;
  align-items: center;
}
.add,.less{
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid #eeeeee;
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.28rem;
}
.product_tanchuang_add p{
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.28rem;
}
.add_cart{
  width: 100%;
  height: 0.9rem;
  background-color: #e64340;
  line-height: 0.9rem;
  text-align: center;
  font-size: 0.36rem;
  color: #ffffff;
}
.pro_act{
  color:#e64340 !important;
  border:1px solid #e64340 !important;
}
.product_footer{
  width: 100%;
  height: 1rem;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>
